<script setup lang="ts">
const emit = defineEmits(['inviterClick'])
const props = defineProps<{
    inviterEmail: string | null
}>()
</script>

<template>
    <div class="inviter">
        <div class="inviter-title">
            <span>Invitation Reward</span>
        </div>
        <ul>
            <li>
                <span><span>1.</span>For each new user you invite. </span>
                <div style="display: flex;align-items: center;">
                    +<img src="@/assets/imgs/flame.png" alt="flame" style="width: 3vmin;"><span>1</span>
                </div>
            </li>
            <li><span><span>2.</span>The invited users complete tasks to withdraw funds.
                </span><span>+50%</span></li>
        </ul>
        <div class="bound">
            <div class="inviter-result van-ellipsis" v-if="props.inviterEmail">Bound:
                {{ props.inviterEmail }}</div>
            <div class="inviter_btn" v-else @click="emit('inviterClick')">
                <span>My Inviter</span>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.inviter {
    padding-top: 3vmin;

    &-title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50vmin;
        height: 9vmin;
        background: linear-gradient(to right, #8FA8FF 5%, 40%, #A575FE 90%);
        border-radius: 0 999px 999px 0;

        span {
            color: #ffffff;
            font-size: var(--middle-font-size);
            font-weight: bold;
        }
    }

    ul {
        width: 100%;
        padding: 3vmin;

        li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2vmin;

            span {
                display: flex;
                font-size: var(--small-font-size);
                color: var(--inviter-main-color);
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .bound {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 13vmin;
        background-color: var(--inviter-main-color);
        border-radius: 0 0 3vmin 3vmin;
    }

    .inviter-result {
        width: 100%;
        font-size: var(--normal-font-size);
        text-align: center;
        color: #ffffff;
        padding: 0 3vmin;
    }

    &_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: var(--inviter-main-color);
        border-radius: 4.2vmin;

        span {
            font-size: var(--normal-font-size);
            color: #ffffff;
        }
    }
}
</style>